import { ExtractPropTypes } from "vue"
import { ImageMode, ImageModes, TuniaoSize, TuniaoSizes, TuniaoType, TuniaoTypes } from '../../types/tuniao-ui'
import { validatorColorValue, validatorSizeValue } from '../../utils'

/**
 * 形状有效值
 */
export const AvatarShapes = ['square'] as const
export type AvatarShape = typeof AvatarShapes[number]

/** 头像角标配置信息 */
export type AvatarBadgeConfig = {
   /** 背景颜色 */
   bgColor?: string,
   /** 字体颜色 */
   color?: string,
   /** 尺寸大小 */
   size?: string | number,
   /** 图标名称 */
   icon?: string,
   /** 显示点 */
   dot?: boolean,
   /** 角标偏移信息 */
   position?: {
     top: string,
     right: string
   }
 }

/**
 * Props参数
 */
export const avatarProps = {
  /** 图标名称或者图片地址 */
  icon: {
    type: String,
    default: ''
  },
  /** 背景颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  bgColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('bg', value)
    }
  },
  /** 字体颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  color: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('color', value)
    }
  },
  /** 头像颜色类型，如果自定义了颜色则使用颜色的值 */
  type: {
    type: String,
    default: '',
    validator: (value: TuniaoType | '') => {
      return value === '' || TuniaoTypes.includes(value)
    }
  },
  /** 尺寸大小，同时设置宽高的值(内置sm、lg、xl), 默认单位为rpx */
  size: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value) || TuniaoSizes.includes(value as TuniaoSize)
    }
  },
  /** 字体大小, 在显示文字和图标模式下有效, 默认单位为rpx */
  fontSize: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /** 加粗字体, 在显示文字模式下有效 */
  fontBold: {
    type: Boolean,
    default: false
  },
  /** 按钮形状 square 圆角正方形 */
  shape: {
    type: String,
    default: '',
    validator: (value: AvatarShape | '') => {
      return value === '' || AvatarShapes.includes(value)
    }
  },
  /** 显示边框 */
  border: {
    type: Boolean,
    default: false
  },
  /** 加粗边框, 当border为true时才生效 */
  borderBold: {
    type: Boolean,
    default: false
  },
  /** border边框颜色, 当border为true时才生效 */
  borderColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('border', value)
    }
  },
  /** 设置阴影 */
  shadow: {
    type: Boolean,
    default: false
  },
  /** 阴影颜色 */
  shadowColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('shadow', value)
    }
  },
  /** 显示角标 */
  badge: {
    type: Boolean,
    default: false
  },
  /** 角标配置信息 */
  badgeConfig: {
    type: Object,
    default: (): AvatarBadgeConfig => {
      return {}
    }
  },
  /** 自定义样式 */
  customStyle: {
    type: Object,
    default: () => {
      return {}
    }
  },
  /** 图片模式mode，当图片为图片时生效 */
  imgMode: {
    type: String,
    default: 'scaleToFill',
    validator: (value: ImageMode) => {
      return ImageModes.includes(value)
    }
  },
  /** 点击按钮时传递的标志符 */
  index: {
    type: [String, Number],
    default: ''
  }
}
export type AvatarProps = ExtractPropTypes<typeof avatarProps>

export const avatarEmits = {
  /** 点击事件 */
  click: (index: string | number) => typeof index === 'string' || typeof index === 'number'
}
export type AvatarEmits = typeof avatarEmits
